<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 成绩数据
 *
 * @type {UnwrapNestedRefs<{total: number, form: {courseScoreUpdateMan: string, courseScoreCourseName: string, courseScoreStudentNo: string, courseScoreStudentName: string, courseScoreAchievement: string, courseScoreOrderClassNo: string, courseScoreOrderClassName: string, courseScoreCourseNo: string}, formVisible: boolean, studentName: string, pageSize: number, tableData: *[], excelOrderClassName: string, pageNum: number}>}
 */
const scoreData = reactive({
    excelOrderClassName: '',
    studentName: '',
    tableData: [],
    total: 0,
    pageSize: 4,
    pageNum: 1,
    formVisible: false, // 是否显示弹窗
    form: {
        courseScoreOrderClassNo: '',
        courseScoreOrderClassName: '',
        courseScoreCourseNo: '',
        courseScoreCourseName: '',
        courseScoreStudentNo: '',
        courseScoreStudentName: '',
        courseScoreAchievement: '',
        courseScoreUpdateMan: '',
    }
})

/**
 * 加载成绩
 */
const loadScore = () => {
    request.get(`/api/order-class-admin/find-score/${account.accountNo}`, {
        params: {
            pageNum: scoreData.pageNum,
            pageSize: scoreData.pageSize,
            studentName: scoreData.studentName,
        }
    }).then(res => {
        scoreData.tableData = res.data?.list || []
        scoreData.total = Math.max.apply(null, res.data.list.map(item => item.courseScoreCountNumber))
    })
}
// 调用成绩加载方法，获取后台数据
loadScore()

/**
 * 翻页
 */
const handelCurrentChange = () => {
    // 翻页时，重新加载数据即可
    loadScore()
}

/**
 * 重置
 */
const reset = () => {
    scoreData.studentName = ''
    // 重置时，重新加载数据即可
    loadScore()
}

/**
 * 导出Excel
 */
const exportExcel = () => {
    if (scoreData.excelOrderClassName === null || scoreData.excelOrderClassName === '') {
        ElMessage.error("导出失败")
    } else {
        request.post(`/api/system/export-student-score/${account.accountNo}`, scoreData.excelOrderClassName).then(res => {
            if (res.code === "200") {
                ElMessage.success("导出成功")
            } else {
                ElMessage.error("导出失败")
            }
        })
    }
}

/**
 * 重置Excel
 */
const resetExportExcel = () => {
    scoreData.excelOrderClassName = ''
}
</script>

<template>
    <div v-if="account.accountRoleName === 'common-order-class-admin' || account.accountRoleName === 'visitor-order-class-admin'">
        <div class="card" style="margin-bottom: 10px;">
            <el-input style="width: 300px; margin-right: 10px;" v-model="scoreData.studentName"
                      placeholder="请输入姓名查询"
                      :prefix-icon="Search"/>
            <el-button @click="loadScore" type="primary" style="margin-left: 10px;">查询</el-button>
            <el-button @click="reset" type="info">重置</el-button>
        </div>
        <div class="card" style="margin-bottom: 10px;">
            <div>
                <el-input style="width: 300px; margin-right: 10px;" v-model="scoreData.excelOrderClassName"
                          placeholder="请输入订单班全称导出Excel"
                          :prefix-icon="Search"/>
                <el-button @click="exportExcel" type="primary">导出Excel</el-button>
                <el-button @click="resetExportExcel" type="info">重置</el-button>
            </div>
            <div>
                <el-table :data="scoreData.tableData" style="width: 100%">
                    <el-table-column prop="courseScoreOrderClassNo" label="班号"/>
                    <el-table-column prop="courseScoreOrderClassName" label="班名"/>
                    <el-table-column prop="courseScoreCourseNo" label="课程号"/>
                    <el-table-column prop="courseScoreCourseName" label="课程名"/>
                    <el-table-column prop="courseScoreStudentNo" label="学号"/>
                    <el-table-column prop="courseScoreStudentName" label="姓名"/>
                    <el-table-column prop="courseScoreAchievement" label="成绩"/>
                </el-table>
            </div>
        </div>
        <div class="card">
            <el-pagination v-model:current-page="scoreData.pageNum"
                           v-model:page-size="scoreData.pageSize"
                           @current-change="handelCurrentChange"
                           background layout="prev, pager, next" :total="scoreData.total"/>
        </div>
    </div>
</template>

<style scoped>

</style>